<template>
	<view class="infoHeader">
		<view class="header">
			<view class="top"
				:style="{
					paddingTop: statusBarHeight + 'px'
				}"
			>
				<view class="icon mr-1 flex justify-center align-center">
					<u-icon name="share-square" 
						color="#fff" 
						:size="60"
					>
					</u-icon>
				</view>
			</view>
			<view class="userinfo px-4 flex">
				<u-avatar :src="info && info.avatar? dealImage : '/static/testPic/loading.gif'"
						size="130"
						@click="$go('/pages/user/other/index', null, 'navigateTo', {noAuth: false})"
				></u-avatar>
				<view class="right ml-2">
					<view class="name mt-2">
						{{info && info.nickname? info.nickname : '未登录'}}
					</view>
					<view class="count mt-1" v-if="info && info.id">
						{{APP_NAME}}号: {{info.id}}
					</view>
				</view>
			</view>
			<view class="statistics my-2 flex">
				<view class="item"
					v-for="(item, index) in statistics" :key="index"
				>
					<view class="num">{{item.count}}</view>
					<view class="name">{{item.name}}</view>
				</view>
			</view>
			<view class="btn flex align-center">
				<u-button v-if="uid == info.id"
					text="编辑资料" size="mini"
					:plain="true"
					type="error"
					shape="circle"
					color="red"
					@click="editInfo()"
				></u-button>
				
				<u-button v-else
					:text="isAttention? '取消关注' : '关注'" size="mini"
					:plain="true"
					type="error"
					shape="circle"
					color="red"
					@click="attentionUser()"
				></u-button>
			</view>
		</view>
		<view class="blank"
			:style="{
				paddingTop: statusBarHeight + 'px'
			}"
		></view>
	</view>
</template>

<script>
	import {
		mergeBackPath
	} from "@/utils/file.js";
	import {mapState} from 'vuex';
	import {
		attentionUser
	} from "@/api/user.js";
	
	export default {
		name: 'info-header',
		props: {
			info: {
				type: Object,
				default: () => ({})
			},
			// 关注之类的
			isAttention: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				// 屏幕状态栏高度
				statusBarHeight: 0,
				statistics: [
					{
						name: '关注',
						count: 10
					},
					{
						name: '粉丝',
						count: 10
					},
					{
						name: '被点赞/收藏',
						count: 10000000
					}
				],
				info_id: null
			}
		},
		mounted() {
			uni.getSystemInfo({
				success: (res) => {
					this.statusBarHeight = res.statusBarHeight;
				}
			});
		},
		computed:{
			...mapState({
				uid: state => state.user.uid
			}),
			dealImage() {
				return mergeBackPath(this.info.avatar);
			},
		},
		methods: {
			attentionUser() {
				attentionUser({
					userId: this.info.id,
					isAttention: !this.isAttention
				}).then(res => {
					// 提示信息
					let backStr = !this.isAttention? "" : "取消";
					this.$msg(backStr + "关注成功！");
					// 提交父组件更改
					this.$emit("update:isAttention", !this.isAttention);
				}).catch(err => this.$msg(err.message));
			},
			editInfo() {
				// 需要验证是否登录了
				this.$go("/pages/user/edit/index", null, 'navigateTo', {noAuth: false});
			}
		}
	}
</script>

<style lang="scss" scoped>
.infoHeader{
	.header{
		position: fixed;
		width: 100vw;
		background-color: black;
		color: white;
		z-index: 999;
		.top{
			overflow: hidden;
			.icon{
				float: right;
				width: 60rpx;
			}
		}
		.userinfo{
			.right{
				.name{
					font-size: 35rpx;
					font-weight: bold;
					max-width: 500rpx;
					width: 500rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
				.count{
					max-width: 500rpx;
					width: 500rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					font-size: 25rpx;
					color: #d0d0d0;
				}
			}
		}
		.statistics{
			.item{
				&:first-of-type{
					margin-left: 20rpx;
				}
				max-width: 140rpx;
				margin-right: 15rpx;
				font-size: 25rpx;
				text-align: center;
				.num{
					max-width: 150rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}
		}
		.btn{
			float: right;
			width: 120rpx;
			margin-top: -70rpx;
			margin-right: 20rpx;
		}
	}	
	.blank{
		width: 100vw;
		height: 300rpx;
		background-color: black;
	}
}	
</style>